<template>
  <view class="container">
    <view class="title">景点人气榜</view>
    <uni-list>
      <uni-list-item 
        v-for="(spot, index) in sortedSpots" 
        :key="index" 
        :title="spot.name" 
        :note="spot.score + '分'"
        class="list-item"
      >
        <view class="spot-info">
          <image :src="spot.image" class="spot-image"></image>
          <view class="spot-details">
            <text class="spot-name">{{ spot.name }}</text>
            <text class="spot-score">{{ spot.score }} 分</text>
            <text class="spot-popularity">人气指数: {{ spot.popularity }}</text>
          </view>
        </view>
      </uni-list-item>
    </uni-list>
  </view>
</template>

<script>
export default {
  data() {
    return {
      spots: [
        { name: '扎龙湿地', score: 9.5, popularity: 10234, image: 'https://img1.qunarzz.com/travel/d4/1701/1d/f13ca4782bc079b5.jpg?color=#30889d' },
        { name: '齐齐哈尔博物馆', score: 9.8, popularity: 20456, image: 'https://th.bing.com/th/id/R.11ecf7bf5cda6dce109776f9efbf68b9?rik=vBgSxSUtIvtmDA&riu=http%3a%2f%2fpic1.k1u.com%2fk1u%2fmb%2fd%2ffile%2f20200708%2f1594187885102690_836_10000.jpg&ehk=bOeaghIeUlVQSCGmxyXOv9vUP2IeP4FIlkaQIe%2bE%2fpU%3d&risl=&pid=ImgRaw&r=0' },
        { name: '龙沙动植物园', score: 9.7, popularity: 18765, image: 'https://th.bing.com/th/id/R.5e8be676aa99a9e67887d6b516325bc4?rik=en32NiDTZUy9Sg&riu=http%3a%2f%2fimg.pconline.com.cn%2fimages%2fupload%2fupc%2ftx%2fitbbs%2f1509%2f04%2fc3%2f12123721_1441321304965.jpg&ehk=sqAABLDraCYYK9oVD0zx8PX07370UpP0pjMpDdI6n2Q%3d&risl=&pid=ImgRaw&r=0' },
        { name: '明月岛', score: 8.7, popularity: 8945, image: 'https://th.bing.com/th/id/R.91df7fb9a6c595ee56c30009f42e225b?rik=bNjPDoyRrjkMBw&riu=http%3a%2f%2fimg.redocn.com%2fsheying%2f20150506%2fqiqihaermingyuedao_4263478.jpg&ehk=fzdiTvqyIiWKfWjr1sN6OroT%2f%2bPwa8TqM0f2%2btjM4B8%3d&risl=&pid=ImgRaw&r=0' },
        { name: '江桥抗战纪念馆', score: 9.6, popularity: 14852, image: 'https://pic4.40017.cn/poi/2016/05/10/10/UxsIKQ_640x320_00.jpg' },
        { name: '大乘寺', score: 8.9, popularity: 8999, image: 'https://th.bing.com/th/id/R.49ee5e894a805a2ad8d23b90693b77e1?rik=9p%2fYyUBpl5O5PQ&riu=http%3a%2f%2fpic1.k1u.com%2fk1u%2fmb%2fd%2ffile%2f20200807%2f1596786602260096_836_10000.jpg&ehk=Kbi5rj4VDlIN8Wp4bqnVwToA6arZ%2bdwfXs750n5onbI%3d&risl=&pid=ImgRaw&r=0' },
        // 更多景点数据
      ]
    };
  },
  computed: {
    sortedSpots() {
      return this.spots.sort((a, b) => b.popularity - a.popularity);
    }
  }
};
</script>

<style scoped>
.container {
  padding: 20px;
  background-color: #f7f7f7;
  min-height: 100vh;
}

.title {
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 20px;
  text-align: center;
  color: #333;
  letter-spacing: 1px;
}

.uni-list {
  margin-top: 10px;
}

.list-item {
  background-color: #fff;
  margin-bottom: 20px; /* 增加卡片之间的间距 */
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.list-item:hover {
  transform: scale(1.02);
  box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
}

.spot-info {
  display: flex;
  align-items: center;
  padding: 20px; /* 增加内边距，让内容更加舒适 */
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(255, 123, 66, 0.2), rgba(255, 174, 66, 0.2));
  margin-bottom: 15px; /* 增加卡片内容内部的行间距 */
}

.spot-image {
  width: 90px;
  height: 90px;
  border-radius: 8px;
  margin-right: 20px;
  object-fit: cover;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.spot-details {
  flex: 1;
}

.spot-name {
  font-size: 20px;
  font-weight: bold;
  color: #333;
  margin-bottom: 8px; /* 增加与其他内容的行间距 */
}

.spot-score {
  font-size: 16px;
  color: #999;
  margin-bottom: 5px; /* 增加与其他内容的行间距 */
}

.spot-popularity {
  font-size: 16px;
  color: #666;
}

.uni-list-item__title {
  font-size: 18px;
  font-weight: bold;
  color: #333;
}

.uni-list-item__note {
  font-size: 14px;
  color: #666;
}

.list-item:nth-child(odd) .spot-info {
  background: linear-gradient(135deg, rgba(51, 132, 255, 0.2), rgba(0, 153, 255, 0.2)); /* 蓝色渐变背景 */
}

.list-item:nth-child(even) .spot-info {
  background: linear-gradient(135deg, rgba(87, 200, 159, 0.2), rgba(0, 192, 146, 0.2)); /* 绿色渐变背景 */
}
</style>
